<template>
	<!-- <view>
		登录页面
	</view> -->
	<view class="box">
		<view class="photo">
			<!-- <input type="text" value="" /> -->
			<image src="" mode=""></image>
		</view>
		<view class="content">
			<view class="name">
			<input type="text" v-model="username" />
		</view>
		<view class="name">
			<input type="text" v-model="password"  password="true"/>
		</view>
		</view>
		
		<view class="login" @click="register">登录</view>
		<view class="bottom">
			<view class="l">找回密码</view>
			<view class="c">|</view>
			<view class="r" @click="goregister">注册账号</view>
		</view>
	</view>
</template>

<script>
	import {doLogin,getMemberInfo} from "../../../api/mine/index.js"
	export default {
		data() {
			return {
			username:"17877777777",
			password:"123456",	
			// username:"17596496508",
			// password:"123456",	
			};
		},
		methods:{
			//这是获取用户信息
			MemberInfo(){
				getMemberInfo().then(res=>{
					console.log(res)
					if(res.success){
						uni.setStorageSync("user",res.data.userInfo);
						uni.showToast({
							title:"登录成功,正在为您跳转页面"
						})
						setTimeout(()=>{
							uni.switchTab({
								url:"../mine"
							})
						},500)
					}
					// res.datauserInfo
				})
			},
			//点击登录
			register(){
				if(this.username.length==""){
					console.log("hhhh")
					uni.showToast({
						title:"用户名不能为空"
					});
					return;
				}
				if(this.password.length<5){
					uni.showToast({
						title:"输入密码不正确"
					});
					return;
				}
				doLogin({
					username: this.username,
					password: this.password,
				}).then(res=>{
					console.log(res)
					if(res.success){
						//删除之前旧信息
						uni.clearStorageSync();
						//重新传入新信息
						var token=uni.setStorageSync("token",res.data.token);
						this.MemberInfo();
					}else{
						uni.showToast({
							title:"登录失败,请检查用户名和密码"
						});
					}
				
				});
				
			},
			//注册页面
			goregister(){
				uni.navigateTo({
					url:"../register/register",
				})
			},
		},
		onLoad(){
			
		},
	}
</script>

<style lang="scss" scoped>
.box{
	width: 100%;
	height: 100vh;
	background-color:#F1ECE7;
	overflow: hidden;
	.photo{
		width: 80px;
		height: 80px;
		box-shadow: 0px 0px 30px 0px rgba(0,0,0,.1);
		border-radius: 50%;
		background-color: #000;
		overflow: hidden;
		margin:64px auto 36px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.content{
		padding:0 35px;
		margin: 0 auto;
			.name{
				
				display: flex;
			align-items: center;
			// width: 100%;
		    height: 18px;
		    color: #333;
		    padding: 16px;
		    margin: 20px 0;
			box-shadow: 0 0 30px 0 rgba(43,86,112,.1);
			border-radius: 30px;
				input{
					margin:0 20px;
					width: 100%;
				}
			}
	}

	.login{
		width: 300px;
		height: 50px;
		border-radius: 60px;
		background: rgb(53, 78, 68);
		color: rgb(255, 255, 255);
		margin:50px auto 0;
		text-align: center;
		line-height:50px;
	}
	.bottom{
		width: 100%;
		height: 20px;
		margin-top: 30px;
		font-size: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgba(0,0,0,.7);
		.c{
			    font-size: 12px;
			    margin:0 7px;
		}
	}
}
</style>
